<script setup>
import { findHotCategoryListAPI } from '@/apis/home.js'
import { ref } from 'vue'

const hotmovieList = ref([])
const hottelevisionList = ref([])
const movieCategory="1-1"
const televisionCategory="1-2"


const getfindHotCategoryListAPI = async (category,list) => {
  const res = await findHotCategoryListAPI(category)
  list.value = res
  console.log(res,"热门数据");
  
}
getfindHotCategoryListAPI(movieCategory,hotmovieList)
getfindHotCategoryListAPI(televisionCategory,hottelevisionList)
</script>

<template>
    <div class="container">
        <div class="pannel">
            <div class="pannel_head">
                <h2>
                    <i class="rebboIcon iconfont icon-paihangbang"></i>
                    遥云影院热门排行榜
                </h2>
                <a href="#" class="more">更多 ></a>
            </div>
        </div>


        <div class="rank">

            <div class="rank_info">
                <div class="list_info">
                    <div class="rank_head">
                        <h3>电影排行榜</h3>
                    </div>
                </div>

                <ul class="part_rows">
                    <li class="rankFirst_item">
                        <a href="#">
                            <div class="rank_left" :style="{backgroundImage: 'url('+hotmovieList[0].pic+')'}"> <span style="background-color: red;">1</span></div>
                            <div class="rank_right">
                                <h4>{{ hotmovieList[0].title }}<i class="iconfont icon-search"> {{ hotmovieList[0].hot }}</i></h4>
                                <p class="vodlist_sub">2021&nbsp;/&nbsp;{{ hotmovieList[0].actor }}&nbsp;/&nbsp;{{ hotmovieList[0].tags }}</p>
                                <p class="vodlist_sub">状态：{{  hotmovieList[0].num == 0 ? "完结" :"更新至"+hotmovieList[0].num+"集"  }}</p>
                            </div>
                        </a>
                    </li>
                    <li class="part_eone">
                        <a href="#"><span class="part_nums">2</span> <span>{{ hotmovieList[1].title }}</span> <i  class="iconfont icon-icon"> {{ hotmovieList[1].hot }}</i></a>
                    </li>
                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#ffc600 ;">3</span> <span>{{ hotmovieList[2].title }}</span> <i  class="iconfont icon-icon"> {{ hotmovieList[2].hot }}</i></a>
                    </li>

                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">3</span> <span>{{ hotmovieList[3].title }}</span> <i  class="iconfont icon-icon"> {{ hotmovieList[3].hot }}</i></a>
                    </li>

                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">4</span> <span>{{ hotmovieList[4].title }}</span> <i  class="iconfont icon-icon"> {{ hotmovieList[4].hot }}</i></a>
                    </li>

                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">5</span> <span>{{ hotmovieList[5].title }}</span> <i  class="iconfont icon-icon"> {{ hotmovieList[5].hot }}</i></a>
                    </li>
                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">6</span> <span>{{ hotmovieList[6].title }}</span> <i  class="iconfont icon-icon"> {{ hotmovieList[6].hot }}</i></a>
                    </li>
                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">7</span> <span>{{ hotmovieList[7].title }}</span> <i  class="iconfont icon-icon"> {{ hotmovieList[7].hot }}</i></a>
                    </li>
                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">8</span> <span>{{ hotmovieList[8].title }}</span> <i  class="iconfont icon-icon"> {{ hotmovieList[8].hot }}</i></a>
                    </li>

                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">9</span> <span>{{ hotmovieList[9].title }}</span> <i  class="iconfont icon-icon"> {{ hotmovieList[9].hot }}</i></a>
                    </li>

                </ul>

            </div>


            <div class="rank_info">
                <div class="list_info">
                    <div class="rank_head">
                        <h3>电视排行榜</h3>
                    </div>
                </div>

                <ul class="part_rows">
                    <li class="rankFirst_item">
                        <a href="#">
                            <div class="rank_left" :style="{backgroundImage: 'url('+hottelevisionList[0].pic+')'}"><span style="background-color: red;">1</span></div>
                            <div class="rank_right">
                                <h4>{{ hottelevisionList[0].title }}<i class="iconfont icon-search"> {{ hottelevisionList[0].hot }}</i></h4>
                                <p class="vodlist_sub">2021&nbsp;/&nbsp;{{ hottelevisionList[0].actor }}&nbsp;/&nbsp;{{ hottelevisionList[0].tags }}</p>
                                <p class="vodlist_sub">状态：{{  hottelevisionList[0].num == 0 ? "完结" :"更新至"+hottelevisionList[0].num+"集"  }}</p>
                            </div>
                        </a>
                    </li>
                    <li class="part_eone">
                        <a href="#"><span class="part_nums">2</span> <span>{{ hottelevisionList[1].title }}</span> <i  class="iconfont icon-icon"> {{ hottelevisionList[1].hot }}</i></a>
                    </li>
                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#ffc600 ;">3</span> <span>{{ hottelevisionList[2].title }}</span> <i  class="iconfont icon-icon"> {{ hottelevisionList[2].hot }}</i></a>
                    </li>

                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">3</span> <span>{{ hottelevisionList[3].title }}</span> <i  class="iconfont icon-icon"> {{ hottelevisionList[3].hot }}</i></a>
                    </li>

                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">4</span> <span>{{ hottelevisionList[4].title }}</span> <i  class="iconfont icon-icon"> {{ hottelevisionList[4].hot }}</i></a>
                    </li>

                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">5</span> <span>{{ hottelevisionList[5].title }}</span> <i  class="iconfont icon-icon"> {{ hottelevisionList[5].hot }}</i></a>
                    </li>
                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">6</span> <span>{{ hottelevisionList[6].title }}</span> <i  class="iconfont icon-icon"> {{ hottelevisionList[6].hot }}</i></a>
                    </li>
                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">7</span> <span>{{ hottelevisionList[7].title }}</span> <i  class="iconfont icon-icon"> {{ hottelevisionList[7].hot }}</i></a>
                    </li>
                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">8</span> <span>{{ hottelevisionList[8].title }}</span> <i  class="iconfont icon-icon"> {{ hottelevisionList[8].hot }}</i></a>
                    </li>

                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">9</span> <span>{{ hottelevisionList[9].title }}</span> <i  class="iconfont icon-icon"> {{ hottelevisionList[9].hot }}</i></a>
                    </li>

                </ul>

            </div>


            <div class="rank_info">
                <div class="list_info">
                    <div class="rank_head">
                        <h3>动漫排行榜</h3>
                    </div>
                </div>

                <ul class="part_rows">
                    <li class="rankFirst_item">
                        <a href="#">
                            <div class="rank_left"><span style="background-color: red;">1</span></div>
                            <div class="rank_right">
                                <h4>扫黑-决战 <i class="iconfont icon-search"> 666</i></h4>
                                <p class="vodlist_sub">2021&nbsp;/&nbsp;中国大陆&nbsp;/&nbsp;动作</p>
                                <p class="vodlist_sub">状态：HD</p>
                            </div>
                        </a>
                    </li>
                    <li class="part_eone">
                        <a href="#"><span class="part_nums">2</span> <span>小小飞虎对</span> <i  class="iconfont icon-icon"> 666</i></a>
                    </li>
                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#ffc600 ;">3</span> <span>小小飞虎对</span> <i  class="iconfont icon-icon"> 666</i></a>
                    </li>

           

                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">4</span> <span>实数学</span> <i  class="iconfont icon-icon"> 666</i></a>
                    </li>

                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">5</span> <span>实数学</span> <i  class="iconfont icon-icon"> 666</i></a>
                    </li>
                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">6</span> <span>实数学</span> <i  class="iconfont icon-icon"> 666</i></a>
                    </li>
                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">7</span> <span>实数学</span> <i  class="iconfont icon-icon"> 666</i></a>
                    </li>
                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">8</span> <span>实数学</span> <i  class="iconfont icon-icon"> 666</i></a>
                    </li>

                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">9</span> <span>实数学</span> <i  class="iconfont icon-icon"> 666</i></a>
                    </li>

                    <li class="part_eone">
                        <a href="#"><span class="part_nums" style="background-color:#999 ;">10</span> <span>实数学</span> <i  class="iconfont icon-icon"> 666</i></a>
                    </li>
                </ul>

            </div>
        </div>

        

    </div>
</template>


<style scoped lang='scss'>
.container {

    .rebboIcon {
            font-size:24px;
            color: #ff5f00;
        }

    .rank {

        display: flex;
        justify-content: space-between;

        .part_rows {
            overflow: hidden;

            .rankFirst_item {
                margin-top: 10px;
                height: 120px;
            }

            a:hover{
                color: #ff5f00;
            }

            .part_eone{
                margin-top: 15px;
                .part_nums{
                    display: inline-block;
                    text-align: center;
                    width: 25px;
                    height: 25px;
                    background-color: #ff5f00;
                    color: #fff;
                    font-weight: bold;
                }

                i{
                    font-weight: bold;
                    float: right;
                    margin-right: 20px;
                }
            }
        }

        a {
            padding: 1px;
            margin-left: 10px;


            .rank_left {
                float: left;
                width: 25%;
                height: 100px;
                margin-top: 5px;
                margin-left: 15px;
                overflow: hidden;
                background-color: #ff5f00;
                background-position: center;
                background-image: url("@/assets/images/none.png");

                span {
                    text-align: center;
                    width: 25px;
                    height: 25px;
                    background-color: #ff5f00;
                    display: block;
                    color: #fff;
                    font-weight: bold;
                }
            }



            .rank_right {
                padding-right: 20px;
                padding-left: 150px;

                i {
                    float: right;
                }
            }
        }
    }

    .rank_info {
        width: 32%;
        height: 580px;
        background-color: #f8f8f8;

        .rank_head{
            margin-top: 10px;
            margin-left: 10px;
        }
    }

    // 设置文本超出使用省略号
    .view-text {
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    background: #fff;

    .pannel {
        display: flex;

        .pannel_head {
            width: 400px;

            h2 {
                display: inline-block;

            }

            .more {
                padding-left: 15px;
            }



        }

        .right_menu {

            li {
                line-height: 70px;
                float: left;

                em {
                    color: #ff5f00;
                }
            }

        }

        a:hover {
            color: $xtxColor;
        }


    }


}
</style>